<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="数据">
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数据表格</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.tableId" filterable clearable placeholder="请选择数据" size="mini"
                        @change="tableSelectChange">
                        <el-option v-for="item in dataTableList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数值</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.itemId" filterable clearable placeholder="请选择数据" size="mini">
                        <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <!-- <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
                <span>数据查询范围</span>
            </el-col>
            <el-col :span="16" class="editcontent">
                <el-select v-model="obj.tableData.filterTimeType" placeholder="选择列时间范围" size="mini" style="width:190px;">
                    <el-option label="15天" :value="15" />
                    <el-option label="1天" :value="1" />
                    <el-option label="7天" :value="7" />
                    <el-option label="30天" :value="30" />
                    <el-option label="90天" :value="90" />
                    <el-option label="1年" :value="365" />
                    <el-option label="全部" :value="99" />
                </el-select>
                <el-tooltip class="item" effect="dark" content="设置数据查询的时间范围，默认查询最近15天" placement="top-start">
                    <i class="el-icon-warning formlabletips"></i>
                </el-tooltip>
            </el-col>
        </el-row> -->
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>最小值</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.minNumber" class="miniinput" type="number" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>最大值</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.maxNumber" class="miniinput" type="number" />
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="样式">
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>小数点位</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.decimal" class="miniinput" type="number" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>数字字体</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.fontSize" class="miniinput" type="number" />
                    <el-color-picker v-model="obj.tableData.fontColor" size="small" show-alpha :predefine="predefineColors"
                        popper-class="mycolorview" @active-change="setColorChange(obj.tableData, 'fontColor', $event)" />
                    <div class="fontstylev">
                        <div :class="['fontitem', { 'active': obj.tableData.fontWeight == 'bold' }]"
                            @click="setFontStyle('fontWeight', obj.tableData, 'fontWeight')"><i
                                class="iconfont icon-zitijiacu"></i>
                        </div>
                        <div :class="['fontitem', { 'active': obj.tableData.fontStyle == 'italic' }]"
                            @click="setFontStyle('fontStyle', obj.tableData, 'fontStyle')"><i
                                class="iconfont icon-zitixieti"></i>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>样式选择</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <!-- <el-radio-group v-model="obj.tableData.styleTemplate" class="styletempradio">
                                    <el-radio :label="0">普通</el-radio>
                                    <el-radio :label="1">带刻度</el-radio>
                                    <el-radio :label="2">渐变</el-radio>
                                    <el-radio :label="3">移动率</el-radio>
                                </el-radio-group> -->
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <div class="tempitem" @click="setTempType(0)"
                                :class="{ active: obj.tableData.styleTemplate == 0 }">
                                <img width="100%" src="@/assets/canvas/temp0.png" alt="" srcset="">
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="tempitem" @click="setTempType(1)"
                                :class="{ active: obj.tableData.styleTemplate == 1 }">
                                <img width="100%" src="@/assets/canvas/temp1.png" alt="" srcset="">
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="tempitem" @click="setTempType(2)"
                                :class="{ active: obj.tableData.styleTemplate == 2 }">
                                <img width="100%" src="@/assets/canvas/temp2.png" alt="" srcset="">
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="tempitem" @click="setTempType(3)"
                                :class="{ active: obj.tableData.styleTemplate == 3 }">
                                <img width="100%" src="@/assets/canvas/temp3.png" alt="" srcset="">
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-collapse v-model="collapseActives" class="edittypeform">
                <el-collapse-item title="标题" name="4">
                    <title-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"
                        :setFontStyle="setFontStyle"></title-form>
                </el-collapse-item>
            </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>

export default {
    name: "GaugeForm",
    props: {
        predefineColors: Array,
        obj: Object,
        dataTableList: Array,
        columnData: Array,
        tableSelectChange: Function,
        deleteDataYinfo: Function,
        setColorChange: Function,
        setFontStyle: Function,
    },
    components: {
        TitleForm: () => import('../mixin/TitleForm.vue'),
        BoxForm: () => import('../mixin/BoxForm.vue'),
    },
    model: {
        prop: "obj",
        event: "change",
    },
    methods: {
        addStatusinfo(item) {
            var parent = this.obj.tableData.statusList[this.obj.tableData.statusList.length - 1];
            item.push({ value: parent.value1, value1: "", color: this.predefineColors[item.length] });
        },
        setTempType(type) {
            this.obj.tableData.styleTemplate = type;
            if (type == 0) {
                this.obj.tableData.fontColor = "#1890FF";
                this.obj.tableData.fontSize = 30;
                this.obj.style.backgroundColor = "#ffffff";
            } else if (type == 1) {
                this.obj.tableData.fontColor = "#ffffff";
                this.obj.tableData.fontSize = 16;
                this.obj.style.backgroundColor = "#1f2c52";
            } else if (type == 2) {
                this.obj.tableData.fontColor = "#999999";
                this.obj.tableData.fontSize = 36;
                this.obj.style.backgroundColor = "#ffffff";
            } else if (type == 3) {
                this.obj.tableData.fontColor = "#ffffff";
                this.obj.tableData.fontSize = 20;
                this.obj.style.backgroundColor = "#222939";
            }
        }
    }
}
</script>

<style scoped>
.tempitem {
    cursor: pointer;
    border: solid 2px #efefef;
    height: 92px;
    overflow: hidden;
    margin-bottom: 10px;
    border-radius: 3px;
}

.tempitem.active {
    border-color: #1890FF;
}
</style>
